<template>
    <div class="container">
        <p class="title">性别比例</p>
        <div class="sex">
            <div class="man">
                <img src="../../../../../assets/image/man.png" alt="">
            </div>
            <div class="woman">
                <img src="../../../../../assets/image/woman.png" alt="">
            </div>
        </div>
        <div class="rate">
            <p>男士58%</p>
            <p>女士42%</p>
        </div>
        <div class="charts" ref="charts"></div>
    </div>
</template>

<script setup lang="ts" name="LeftCenter">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

const charts = ref()
onMounted(() => {
    const myCharts = echarts.init(charts.value)
    myCharts.setOption({
        xAxis: { show: false, min: 0, max: 100 },
        yAxis: { type: 'category', show: false },
        series: [
            { type: 'bar', data: [58], barWidth: 20, z: 100, itemStyle: { borderRadius: 20 } },
            { type: 'bar', data: [100], barWidth: 20, barGap: '-100%', itemStyle: { color: '#D4237A', borderRadius: 20 } }
        ],
        grid: { left: 0, right: 0, bottom: 0, top: 0 }
    })
})
</script>

<style scoped lang="scss">
.container {
    .title {
        font-size: 20px;
        margin-left: 20px;
    }

    .sex {
        display: flex;
        justify-content: center;

        .man {
            width: 100px;
            height: 100px;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .woman {
            width: 100px;
            height: 100px;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }

    .rate {
        display: flex;
        justify-content: space-between;
        padding: 0 20px;
    }

    .charts {
        margin-top: 10px;
        height: 50px;
    }
}
</style>